<template>
  <view class="home">
    <view class="top">
      <view class="topcard">
        <h5 class="school_name fwbold f30">{{ school_info.school_name ? school_info.school_name:0  }}</h5>
        <view class="number_style mt16 disFlex">
          <view class="teacher_data mr20">
            教职工人数：{{ school_info.worker ? school_info.worker : 0  }}
          </view>
          <view class="study_data"> 学生人数： {{ school_info.student ? school_info.student : 0 }} </view>
        </view>
      </view>
      <!-- 通过公告 -->
      <view class="notice flexAI">
        <view class="left">
          <van-icon name="volume"></van-icon>
          <text >通知公告</text>
        </view>
        <view class="annoswipe">
          <swiper
            class="myswiper"
            :circular="true"
            :vertical="true"
            :autoplay="true"
            :interval="5000"
          >
            <swiper-item class="item flexb" v-for="(item, index) in annunciation" :key="index">
              <view> 公高 {{ index + 1 }} </view>
              <view> {{ item }}</view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <!-- 待办事项 -->
    <view class="matter-box" v-if="wait_item.order_audit">
      <view class="matter">
        <view class="title disFlex fwbold f30 ml20">
          <view class="identification"></view>
          <view>待办事项</view>
        </view>
        <view class="data disFlex">
          <view class="data_item tc flex1">
            <view class="number fwbold f48">{{ wait_item.order_audit.order_audit }}</view>
            <view class="titles f24 flexc tc mt20">{{ wait_item.order_audit.order_audit_name}}</view>
          </view>
          <view class="data_item tc flex1">
            <view class="number fwbold f48">{{ wait_item.out_audit.out_audit }}</view>
            <view class="titles f24 flexc tc mt20">{{ wait_item.out_audit.out_audit_name }}</view>
          </view>
          <view class="data_item tc flex1">
            <view class="number fwbold f48"> {{ wait_item.voucher_audit.voucher_audit }}</view >
            <view class="titles f24 flexc tc mt20">{{ wait_item.voucher_audit.voucher_audit_name}}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 临期预警 -->
    <view class="forewarning-box mb20">
      <view class="forewarning">
        <view class="title flexb fwbold f30 ml20">
          <view class="title_left disFlex">
            <view class="identification"></view>
            <view>临期预警</view>
          </view>
          <view class="title_right" @click="goAll"> 查看全部>></view>
        </view>
        <view class="table mb20">
          <view class="header disFlex">
            <view class="Item_item">商品编号</view>
            <view class="trade_name">商品名称</view>
            <view class="commodity_quantity tc">数量</view>
            <view class="maturity_time tc">到期时间</view>
          </view>
          <view class="row disFlex" v-for="(item, index) in coming_goods" :key="index">
            <view class="Item_item flexc tc">{{ item.goods_sn }}</view>
            <view class="trade_name flexc tc">{{ item.goods_name }}</view>
            <view class="commodity_quantity flexc tc">{{ item.stock }}</view>
            <view class="maturity_time flexc tc">{{ item.endusetime }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 盈余预警 -->
    <view class="surplusWarning-box mb20">
      <view class="surplusWarning">
        <view class="title disFlex fwbold f30 ml20">
          <view class="identification"></view>
          <view>盈余预警</view>
        </view>
        <view class="graph flexc">
          <van-circle
            :value="profit_warn.sqyy"
            :text="sqyy"
            layer-color="#eeeeee"
            color="#62B158"
            stroke-width="10"
            size="120"
          />
        </view>
        <view class="txt flexJC">
          <view>{{ profit_warn.title }} {{ profit_warn.data }}</view>
          <view class="tendency">{{ profit_warn.summary }}</view>
        </view>
      </view>
    </view>
    <!-- 今日食谱 -->
    <view class="recipe-box mb20">
      <view class="recipe">
        <view class="title flexb">
          <view class="title_left flexb fwbold f30 ml20">
            <view class="identification"></view>
            <view>今日食谱</view>
            <view class="data_time ml10">{{ menusTime }}</view>
          </view>
          <view class="title_right" @click="toggleCollapse">
            <text>{{ toggle ? "收起" : "展开" }}</text>
            <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
          </view>
        </view>
        <view :class="toggleClass">
          <view class="box">
            <view class="title">
              <view class="set-meal"> 套餐 </view>
              <view class="food disFlex"> 菜谱 </view>
            </view>
            <view class=" disFlex" v-if="this.menus.length >0">
              <view class="set-meal">{{ menus[0].menu_name }}</view>
              <view class="food">
                <view class="item" v-for="(item, index) in menus[0].menumaterials" :key="index">
                  {{ item.goods_name }}
                </view>
              </view>
            </view>
            <view v-else> 暂无食谱 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Toast from "@/wxcomponents/vant/dist/toast/toast";
export default {
  data() {
    return {
      school_info: {}, //学校信息
      annunciation: [], //公告
      wait_item: {}, //待办事项
      coming_goods: [], //临期预警
      graph: {
        text: "30%",
        value: 30,
        title: "上期盈余（2023年7月）",
        tendency: "亏",
      },
      toggle: false,
      menus: [], //今日食谱
      menusTime:"", //今日食谱时间
      profit_warn: {}, //盈余
      sqyy: "", //盈余百分比
    };
  },

  computed: {
    toggleClass() {
      return this.toggle ? "heightauto" : "height0";
    },
  },

  // 监听页面加载，该钩子被调用时
  onLoad() {},
  methods: {
    goAll() {
      uni.navigateTo({
        url: "../home/zeroWarning",
      });
    },
    toggleCollapse() {
      console.log("展开收起");
      this.toggle = !this.toggle;
    },
    /*首页信息*/ 
    async getHome() {
      let res = await this.$ajax.getHomepage();
      if (res.code == 1) {
        console.log(res.data);
        this.school_info = res.data.school_info;
        this.annunciation = res.data.annunciation; //公告
        this.wait_item = res.data.wait_item; //待办
        this.coming_goods = res.data.coming_goods; //临期预警
        this.menus = res.data.menus; //今日食谱
        this.menusTime= res.data.menus.use_end_time; //今日食谱
        this.profit_warn = res.data.profit_warn.previous_period; //盈余预警
        this.sqyy = this.profit_warn.sqyy + "%"; //临期预警 进度条text 文字
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
  },

  mounted() {
    this.getHome();
    console.log(this.allPermission)
  },

  /*监听页面显示，页面每次出现在屏幕上都触发*/ 
  onShow() {
    uni.setNavigationBarTitle({
      title: "丰苗智慧后勤",
    });
  },

  /*监听用户下拉动作，一般用于下拉刷新*/ 
  onPullDownRefresh() {},

  /*监听页面初次渲染完成，此时组件已挂载完成*/ 
  onReady() {},
};
</script>


<style lang="scss">
// 公告轮播样式
.myswiper {
  height: 80rpx;
  width: 500rpx;

  .item {
    height: 80rpx;
    width: 500rpx;
    align-items: center;
    padding: 0 20rpx;
  }
}
.height0 {
  height: 0;
}
.heightauto {
  height: auto;
}
.home {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  padding-bottom: 15rpx;

  .top {
    height: 260rpx;

    .topcard {
      width: 100%;
      height: 200rpx;
      box-sizing: border-box;
      background: #62b158;
      padding: 31rpx 0rpx 47rpx 30rpx;

      .school_name {
        color: white;
      }

      .number_style {
        color: white;
        line-height: 30rpx;

        .teacher_data { 

        }
      }
    }

    // 通知
    .notice {
      width: 710rpx;
      height: 80rpx;
      position: absolute;
      padding: 0 20rpx;
      top: 160rpx;
      left: 3%;
      border-radius: 10rpx !important;
      background-color: #ffffff;
      /* 外阴影 */
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
      margin: 0 auto;
      .left {
        text {
          margin-left: 15rpx;
        }
      }
    }
  }

  // 待办事项
  .matter-box {
    width: 100%;
    padding: 0 20rpx;
    margin-bottom: 24rpx;

    .matter {
      width: 100%;
      height: 240rpx;
      padding: 15rpx;
      border-radius: 8rpx;
      background-color: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

      .title {
        line-height: 28rpx;
        margin-top: 14rpx;
        box-sizing: border-box;
      }

      .data {
        margin-top: 32rpx;

        .data_item {

          .number {
            font-family: SourceHanSansSC;
            color: #62b158;
            font-style: normal;
            text-decoration: none;
          }

          .titles {
            font-family: SourceHanSansSC;
            color: #666666;
            font-weight: 800rpx;
          }
        }
      }
    }
  }

  //临期预警
  .forewarning-box {
    width: 100%;
    padding: 0 20rpx;
    overflow: hidden;

    .forewarning {
      width: 100%;
      height: auto;
      padding: 15rpx;
      overflow: hidden;
      border-radius: 8rpx;
      background-color: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
      box-sizing: border-box;

      .title {

        line-height: 28rpx;
        box-sizing: border-box;

        .title_left {
        }

        .title_right {
          font-family: SourceHanSansSC;
          color: #1769d9;
        }
      }

      // 表格
      .table {
        width: 100%;
        height: 500rpx;
        border-collapse: collapse;
        margin-top: 26rpx;
        overflow: hidden;
        box-sizing: border-box;

        .header {
          background: rgba(98, 177, 88, 0.9);
          border: 1px solid #ccc;
        }

        .Item_item {
          width: 25%;
          padding: 10px;
          border-right: 1px solid #ccc;
        }

        .trade_name {
          width: 25%;
          padding: 10px;
          border-right: 1px solid #ccc;
        }

        .commodity_quantity {
          width: 20%;
          padding: 10px;
          border-right: 1px solid #ccc;
        }

        .maturity_time {
          width: 30%;
          padding: 10px;
          border-right: 1px solid #ccc;
        }

        .row {
          border: 1px solid #ccc;
        }

        .row:nth-child(2n-1) {
          background: rgba(98, 177, 88, 0.15);
        }
      }
    }
  }

  // 盈余预警
  .surplusWarning-box {
    width: 100%;
    padding: 0 20rpx;
    overflow: hidden;

    .surplusWarning {
      width: 100%;
      height: 476rpx;
      padding: 15rpx;
      overflow: hidden;
      border-radius: 8rpx;
      background-color: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
      padding-bottom: 20rpx !important;

      .title {
        line-height: 28rpx;
        margin-top: 14rpx;
        box-sizing: border-box;
      }

      .graph {
        margin-top: 32rpx;
      }

      .txt {
        margin-top: 32rpx;

        .tendency {
          color: #c72020;
        }
      }
    }
  }

  // 今日食谱
  .recipe-box {
    width: 100%;
    padding: 0 20rpx;
    overflow: hidden;

    .recipe {
      width: 100%;
      line-height: 60rpx;
      padding: 15rpx;
      overflow: hidden;
      border-radius: 8rpx;
      background-color: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
      box-sizing: border-box;

      .title {

        .title_left {
          line-height: 28rpx;
          margin-top: 14rpx;
          box-sizing: border-box;

          .data_time {
          }
        }
        .title_right {
          font-family: SourceHanSansSC;
          color: #1769d9;
        }
      }
      .box {
        .title {
          display: flex;
          justify-content: flex-start;
        }
        .set-meal {
          width: 40%;
        }
        .food {
          width: 60%;
        }
        .content {
          .item{
            display: flex;
            margin-right: 10rpx;
          }
        }
      }
    }
  }

  // 通用（公用）样式
  .identification {
    width: 6rpx;
    height: 28rpx;
    background-color: #62b158;
    margin-right: 20rpx;
  }
}
</style>
